<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">
    <style>
        * {
            border-radius: 0 !important;
        }

        .login-box {
            margin-top: 150px;
        }

        .login-panel {
            padding: 10px;
            background: #fff;
        }
    </style>
</head>

<body class="layui-bg-gray">
    <!--导航条-->
    <ul class="layui-nav layui-bg-blue">
        <li class="layui-nav-item">
            <a href="#" class="layui-logo">
                <img src="./res/images/logo2-2.png" width="80px" alt="">
            </a>
        </li>
    </ul>

    <!--登录/注册框-->
    <div class="layui-container login-box">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset4 login-panel">
                <!-- <div class="layui-carousel" id="ID-carousel-demo-1">
                    <div carousel-item>
                        <div>
                            <img src="./res/images/2.png" alt="">
                        </div>
                        <div>条目2</div>
                        <div>条目3</div>
                        <div>条目4</div>
                        <div>条目5</div>
                    </div>
                </div> -->
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">管理员登录</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!--登录tab-->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane" action="login">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" class="layui-input" placeholder="请输入账号"
                                            required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入账号">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" class="layui-input" placeholder="请输入密码"
                                            required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入密码"
                                            autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="save" class="layui-bg-blue" title="保存一周"
                                        lay-skin="primary">
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                        lay-filter="formLogin">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 10px;">&copy;章集团</div>
    </div>

    <script src="./res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            var ele = layui.element;
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;
            var carousel = layui.carousel;
            // 渲染 - 常规轮播
            carousel.render({
                elem: '#ID-carousel-demo-1',
                width: 'auto'
            });

            form.on('submit(formLogin)', function (data) {
                // 获取表单数据
                data = data.field;
                // 发送ajax请求，请求后台接口
                $.get('http://127.0.0.1:8080/admin/login', data, function (resp) {
                    if (resp.code !== 0) {
                        layer.alert(resp.msg, { icon: 2 })
                        return
                    }
                    layer.msg(resp.msg, function () {
                        // 缓存管理员信息到本地储存
                        sessionStorage.setItem('admin', JSON.stringify(resp.data))
                        // 页面跳转
                        location.href = 'main.html';
                    })

                })
                return false;
            })

        })
    </script>
</body>

</html>